<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/public/templateUI/publicStyle.css" />
    <style>
        .btnStyle{
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div style="padding: 20px 50px">
    <button type="button" id="ueditor-audioUpload-Btn" class="layui-btn layui-btn-sm layui-btn-normal">上传音频</button>
    <div style="padding-top: 20px">
        <audio id="audioShow" src="" controls src=""></audio>
    </div>
    <div style="text-align: center;margin-top: 80px">
        <button type="button" class="layui-btn layui-btn-sm confirm layui-btn-normal btnStyle">确定</button>
        <button type="button" class="layui-btn layui-btn-sm cancel layui-btn-primary btnStyle">取消</button>
    </div>
</div>

<script type="text/javascript" src="../internal.js"></script>
<script src="../../third-party/jquery-1.10.2.js"></script>
<script src="/public/templateUI/layui/layui.all.js"></script>
<script type="text/javascript" src="/public/transcode.js"></script>
<script src="/public/ossUploadJs/myOssSdk.js" type="text/javascript" charset="utf-8"></script>
<script src="/public/ossUploadJs/uploadAliyun.js" type="text/javascript" charset="utf-8"></script>
<script>
    var uploadInst = null;
    var $ = layui.jquery
        , upload = layui.upload;
    var audio_file = null;
    //普通图片上传
    // var posterWidth = 1032;
    // var posterHeight = 405;
    uploadInst = upload.render({
        elem: '#ueditor-audioUpload-Btn'
        , auto: false
        ,headers: {token:localStorage.getItem("token")}
        , url: '/api/Upload/allUpload'
        ,accept: 'file' //普通文件
        ,exts: 'mp4|mp3|wmv' //只允许上传视频
        , choose: function (obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result) {
                $("#audioShow").attr('src',result)
                audio_file = file;
                return false
            });
        }
        , done: function (res) {
            // layer.closeAll();
            if(res.code==200){
                // editor.execCommand('insertHtml','<p><br/></p><p><audio style="margin: 10px auto;display: block" src="'+res.data.all_path+'" controls>您的浏览器不支持 audio 标签。</audio></p><p><br/></p>');
                // dialog.close();
            }else{
                layer.msg(res.msg)
            }
            //上传成功
        }
        , error: function () {
            layer.msg("网络错误，请稍后再试")
        }
    });

    $(".confirm").click(function () {
        if ($("#audioShow").attr('src')==""){
            layer.msg("请先上传音频");
            return false
        }
        var index = layer.load(1, {
            shade: [0.2,'#333333'] //0.1透明度的白色背景
        });
        audioUpload();
        // uploadInst.upload();
        return false
    });

    function audioUpload(){
        // var file = dataURLtoFile(data,'ueditor_img_'+new Date().getTime()+'.png';
        // var formData = new FormData();
        // formData.append('file', file);
        GlobalUploadFile(audio_file, 'image', function (res) {
            var audio_url = res.path;
            layer.closeAll();
            editor.execCommand('insertHtml','<p><br/></p><p><audio style="margin: 10px auto;display: block" src="'+audio_url+'" controls>您的浏览器不支持 audio 标签。</audio></p><p><br/></p>');
            // editor.execCommand('insertHtml', '<img data-width="'+width+'" data-height="'+height+'" style="margin: 10px auto;display: block;max-width: 100%!important;" _src="'+image+'" src="'+image+'">');
            dialog.close();
            // postHttpAjax("/system/system/setBackGroupPic", {BackGroupPic: image})
            // $('#banner_path').attr("src", res.path);
            //$("#path").val(res.path);
        }, function (err) {
            console.log(err)
            layer.closeAll();
            layer.msg('上传文件失败！');
            // layer.msg("网络错误，请稍后再试")
            // layer.closeAll(); //疯狂模式，关闭所有层
        });
    }

    $(".cancel").click(function () {
        dialog.close();
        return false
    })
</script>
</body>
</html>